import React from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { UserOutlined } from '@ant-design/icons';


const { Sider, Content } = Layout;

function Custom(props) {
    var navigate = useNavigate()
    var location = useLocation()

    const items = [
        { label: '客户管理', key: '/index/custom/custommanage' },
        {
            label: '设置', key: 'sub2', icon: <UserOutlined />, children: [
                { label: '客户信息', key: '1' },
                { label: '客户标签', key: '2' },
                { label: 'vip客户设置', key: '3' },
                { label: '黑名单客户', key: '4' },
                { label: '客户保存规则', key: '5' },
                { label: '客户分配规则', key: '6' }
            ]
        }
    ];

    return (
        <Layout className='custom'>
            <Sider>
                <div className="title">客户</div>
                <Menu
                    mode="inline"
                    onClick={({ key }) => { navigate(key) }}
                    defaultSelectedKeys={[location.pathname]}
                    items={items}
                />
            </Sider>
            <Content>
                {/* 三级路由出口 */}
                <Outlet></Outlet>
            </Content>
        </Layout>
    );
}

export default Custom;